<!DOCTYPE HTML>
<html>
 <head>
  <title> 商品回收站</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <link href="../assets/css/dpl-min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/css/bui-min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/css/page-min.css" rel="stylesheet" type="text/css" /> 
 </head>
 <body>
  
  <div class="container">
    <div class="row header">
      <p>商品回收站</p>
      <span class="headBtn"><a  href="#">商品列表</a></span> 
    </div>
    <div class="row fileborder">
            <div class="ontrol-group span4" >
              <select name="" id="" name="mode">
                <option value="" selected="selected">所有分类</option>
                <option value=""></option>
              </select>
            </div>

            <div class="ontrol-group span4" >
              <select name="" id="" name="type">
                <option value="" selected="selected">所有商品</option>
                <option value=""></option>
              </select>
            </div>

            <div class="ontrol-group span7" >
              <input type="text" placeholder="商品编号" />
            </div>
                    
            <div class="span3">
                 <span class="myspanBtn">搜索</span>
             </div>   
              <div class="clear"></div>
             <div class="row" style="margin: 5px;">
               <div class="span3">
                   <span class="myspanBtn">还原</span>
               </div>  
              <!--  <div class="span3">
                <span class="myspanBtn">删除</span>
              </div>   -->
            </div>       
        </div>
          <div class="search-grid-container">
            <div id="grid"></div>
          </div>
     </div>

    <div id="content" class="hide">
      <form id="J_Form" class="form-horizontal" action="../data/edit.php?a=1">
        <input type="hidden" name="a" value="3">
        <div class="row">
          <div class="control-group span8">
            <label class="control-label"><s>*</s>学生姓名</label>
            <div class="controls">
              <input name="name" type="text" data-rules="{required:true}" class="input-normal control-text">
            </div>
          </div>
          <div class="control-group span8">
            <label class="control-label"><s>*</s>学生性别</label>
            <div class="controls">
              <select  data-rules="{required:true}"  name="sex" class="input-normal"> 
                <option value="">请选择</option>
                <option value="1">男</option>
                <option value="0">女</option>
              </select>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="control-group span8">
            <label class="control-label"><s>*</s>学生班级</label>
            <div class="controls">
              <input name="grad" type="grade" data-rules="{required:true}" class="input-normal control-text">
            </div>
          </div>
          <div class="control-group span8">
            <label class="control-label"><s>*</s>生日</label>
            <div class="controls">
              <input name="birthday" type="text" data-rules="{required:true}" class="calendar">
            </div>
          </div>
          
        </div>
        <div class="row">
          <div class="control-group span15">
            <label class="control-label">学生家庭住址</label>
            <div class="controls control-row4">
              <textarea name="address" class="input-large" type="text"></textarea>
            </div>
          </div>
        </div>
      </form>
    </div>

  <script type="text/javascript" src="../assets/js/jquery-1.8.1.min.js"></script>
  <script type="text/javascript" src="../assets/js/bui-min.js"></script>
  <script type="text/javascript" src="../assets/js/config-min.js"></script>
  <script type="text/javascript">
    BUI.use('common/page');
  </script>

<script type="text/javascript">
  BUI.use('common/search',function (Search) {
   
      var editing = new BUI.Grid.Plugins.DialogEditing(),
      columns = [
          // {title:'编号',dataIndex:'goodsRecycle-0-0',width:100,renderer:function(v){
          //   return Search.createLink({
          //     id : 'detail' + v,
          //     title : '商品信息',
          //     text : v,
          //     href : 'detail/example.html'
          //   });
          // }},
          {title:'编号',dataIndex:'goodsRecycle-0-0',width:150},
          {title:'图片',dataIndex:'goodsRecycle-0-1',width:150},
          {title:'商品名称',dataIndex:'goodsRecycle-0-2',width:150},
          {title:'分类',dataIndex:'goodsRecycle-0-3',width:120},
          {title:'价格',dataIndex:'goodsRecycle-0-4',width:120},
          {title:'重量',dataIndex:'goodsRecycle-0-5',width:120},
          {title:'排序',dataIndex:'goodsRecycle-0-6',width:120},
          {title:'库存',dataIndex:'goodsRecycle-0-7',width:120}
        ],
      store = Search.createStore('../data/goods01.json',{
        proxy : {
          save : { //也可以是一个字符串，那么增删改，都会往那么路径提交数据，同时附加参数saveType
            addUrl : '../data/add.json',
            updateUrl : '../data/edit.json',
            removeUrl : '../data/del.php'
          }/*,
          method : 'POST'*/
        },
        autoSync : true //保存数据后，自动更新
      }),
      gridCfg = Search.createGridCfg(columns,{
        tbar : {
          items : [
            {text : '<i class="icon-plus"></i>新建',btnCls : 'button button-small',handler:addFunction},
            {text : '<i class="icon-edit"></i>编辑',btnCls : 'button button-small',handler:function(){alert('编辑');}},
            {text : '<i class="icon-remove"></i>删除',btnCls : 'button button-small',handler : delFunction}
          ]
        },
        plugins : [editing,BUI.Grid.Plugins.CheckSelection,BUI.Grid.Plugins.AutoFit] // 插件形式引入多选表格
      });

    var  search = new Search({
        store : store,
        gridCfg : gridCfg
      }),
      grid = search.get('grid');

    function addFunction(){
      var newData = {isNew : true}; //标志是新增加的记录
      editing.add(newData,'name'); //添加记录后，直接编辑
    }

    //删除操作
    function delFunction(){
      var selections = grid.getSelection();
      delItems(selections);
    }

    function delItems(items){
      var ids = [];
      BUI.each(items,function(item){
        ids.push(item.id);
      });

      if(ids.length){
        BUI.Message.Confirm('确认要删除选中的记录么？',function(){
          store.save('remove',{ids : ids});
        },'question');
      }
    }

    //监听事件，删除一条记录
    grid.on('cellclick',function(ev){
      var sender = $(ev.domTarget); //点击的Dom
      if(sender.hasClass('btn-del')){
        var record = ev.record;
        delItems([record]);
      }
    });
  });
</script>

</body>
</html>  
